<template>
    <div class="com-container">
        <div class="com-chart" ref="ref_stock"></div>
    </div>
</template>
<script>
export default {
    name:'stock',
    data(){
        return{
            chartInstance:null, //初始化echarts的对象
            allData:null,//服务器请求回来的数据
            timeId:null, //定时器id
            currentId:0, //翻页id
        }
    },
    created(){
        this.$socket.registerCallBack('stockData',this.getData);
    },
    mounted(){
        this.initChart();
        // this.getData();
        this.$socket.send({
            action:'getData',
            socketType:'stockData',
            chartName:'stock',
            value:''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    // 组件销毁
    destroyed(){
        // 移出window.addEventListener('resize',this.updateAdapter);
        window.removeEventListener('resize',this.screenAdapter);
        // 移出定时器
        clearInterval(this.timeId);
        // 注销回调函数
        this.$socket.unRegisterCallBack('stockData');
    },
    computed:{
        
    },
    methods:{
        // 定义初始化图表的方法initChart()
        initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.ref_stock,'chalk');
            // 拆分option配置项
            const initOption = {
                title:{
                    text:'▎库存和销量分析',
                    top:20,
                    left:20
                }
            }
            this.chartInstance.setOption(initOption);
            // 绑定事件
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval();
            })
        },
        // 定义一个获取服务器方法getData()
        getData(ret){
            // const { data:ret } = await this.$http('stock');
            this.allData = ret;
            // console.log(ret)
            this.updateChart();
            this.startInterval();
        },
        // 更新图表方法updateChart()
        updateChart(){
           const centerArr = [
               ['18%','40%'],
               ['50%','40%'],
               ['82%','40%'],
               ['34%','75%'],
               ['66%','75%'],
           ]

           const colorArr = [
               ['#4ff778','#0bab2c'],
               ['#e5dd45','#e8b11c'],
               ['#e8821c','#e55445'],
               ['#5052ee','#ab6ee5'],
               ['#23e5e5','#2e72bf']
           ]

           //处理数据
           const start = this.currentId * 5;
           const end = (this.currentId + 1) * 5;
           const showData = this.allData.slice(start,end);
            // console.log(showData)
           const seriesArr = showData.map((item,index)=>{
               return {
                   type:'pie',
                   center:centerArr[index],
                   hoverAnimation:false, //取消鼠标经过动画
                   labelLine:{
                       show:false //隐藏指示线
                   },
                   label:{
                       position:'center',
                       color:colorArr[index][0]
                   },
                   data:[
                       {
                           name:item.name + '\n'+'\n' + item.sales,
                           value:item.sales,
                           itemStyle:{
                               color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[
                                   {
                                       offset:0,
                                       color:colorArr[index][0]
                                   },
                                   {
                                       offset:1,
                                       color:colorArr[index][1]
                                   }
                               ])
                           }
                       },{
                           value:item.stock,
                           itemStyle:{
                               color:'#333843'
                           }
                       }
                   ]
               }
           })
            //console.log(seriesArr)

            // 数据配置项
            const dataOption = {
               series:seriesArr   
            }
            this.chartInstance.setOption(dataOption)
        },
        // 实现屏幕适配
        /*
            1.监听窗口的大小的变化
            2.设置适配想数据
            3.调用echarts.resize()方法
        */
       screenAdapter(){
           const titleFontSize = this.$refs.ref_stock.offsetWidth / 100 * 3.6
           const innerRadius = titleFontSize * 2.5;
           const outRadius = innerRadius * 1.125;
           const adapterOption = {
               title:{
                   textStyle:{
                       fontSize:titleFontSize
                   }
               },
               series:[
                   {   
                       type:'pie',
                       radius:[outRadius,innerRadius],
                       label:{
                           fontSize:titleFontSize / 2
                       }
                   },
                   {   
                       type:'pie',
                       radius:[outRadius,innerRadius],
                       label:{
                           fontSize:titleFontSize / 2
                       }
                   },
                   {   
                       type:'pie',
                       radius:[outRadius,innerRadius],
                       label:{
                           fontSize:titleFontSize / 2
                       }
                   },
                   {   
                       type:'pie',
                       radius:[outRadius,innerRadius],
                       label:{
                           fontSize:titleFontSize / 2
                       }
                   },
                   {   
                       type:'pie',
                       radius:[outRadius,innerRadius],
                       label:{
                           fontSize:titleFontSize / 2
                       }
                   }
               ]
           }

            //设置数据
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
       },
       //创建一个定时器
       startInterval(){
           if(this.timeId){
               clearInterval(this.timeId);
           }
           this.timeId = setInterval(()=>{
               this.currentId++;
               if(this.currentId > 1){
                   this.currentId = 0;
               }
               this.updateChart();
           },5000)
       }

    }
}
</script>
<style lang="less" scoped>

</style>